<template>
	<view class="page">
		<gui-a-header title="反馈投诉"></gui-a-header>
		<view class="main">
			<view class="title gui-flex gui-justify-content-center gui-bold c333 f28">
				请选择您要反馈投诉的类型
			</view>
			<view class="gui-flex gui-justify-content-center">
				<view class="type_item" :class="[(formData.type == 1) ? 'bg_blue' : 'bg_gray']" @click="typeChange(1)">
					反馈与建议
					<image class="pos_image" src="../../static/image/fkyjy_select_bg.png" mode="widthFix"
						v-if="formData.type == 1"></image>
					<image class="pos_image" src="../../static/image/fkyjy_bg.png" mode="widthFix" v-else></image>
				</view>
				<view class="type_item ml20" :class="[(formData.type == 2) ? 'bg_blue' : 'bg_gray']"
					@click="typeChange(2)">
					投诉
					<image class="pos_image" src="../../static/image/ts_bg.png" mode="widthFix"
						v-if="formData.type == 2"></image>
					<image class="pos_image" src="../../static/image/ts_select_bg.png" mode="widthFix" v-else></image>
				</view>
			</view>
			<view class="zw_20 mt40">

			</view>
			<view class="bgfff textarea_warp">
				<textarea v-model="formData.context" name="name5" placeholder="请输入10字以上的描述，以便我们提供更好的服务..."
					class="gui-textarea gui-bg-gray gui-dark-bg-level-1 areapd" :maxlength="400"
					style="width:100%;"></textarea>
				<text class="max_len c666">{{formData.context.length}}/400</text>
			</view>
			<view class="upload">
				<gui-upload-images @change="change" ref="uploadimgcom" @uploaded="uploaded"
					:uploadServerUrl="`${baseURL}/common/uploadLocal`"></gui-upload-images>
				<button class="saveBtn" @tap="sumbit">
					<text class="f32">提交</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import graceChecker from "@/Grace6/js/checker.js"
	import config from '@/config/app.js';
	const {
		baseURL
	} = config;
	import {
		upComFeedback
	} from '@/api/app.js'
	import {
		ref,
		reactive,
		inject
	} from 'vue'
	const isClick = ref(true);
	const $u = reactive(inject('$u'))
	const feedbackType = ref(1)
	const formData = ref({
		type: 1,
		context: '',
		img: ''
	})
	const needPploadedImgs = ref(false)

	const typeChange = (type) => {
		formData.value.type = type;
	}
	const uploadimgcom = ref(null)
	const change = (e) => {
		let list = e.filter((item) => {
			return item.progress == 0
		})
		if (list.length > 0) needPploadedImgs.value = true;
	}
	const uploaded = (uploadedImgs) => {
		formData.value.img = uploadedImgs[0].url;
		needPploadedImgs.value = false;
		sumbit();
	}

	const sumbit = () => {
		if (needPploadedImgs.value) {
			uploadimgcom.value.upload();
			return;
		}


		//定义表单规则
		let rule = [{
			name: 'context',
			checkType: 'notnull',
			errorMsg: '请输入内容'
		}];
		let checkRes = graceChecker.check(formData.value, rule);
		if (checkRes) {
			if (isClick.value) {
				isClick.value = false;
			} else {
				return;
			}
			let form = Object.assign(formData.value, {})
			upComFeedback(form).then(res => {
				if (res.code == 200) {
					$u.to(`/pages/mine/feedback-success`, 'redirectTo')
				}
			}).finally(() => {
				isClick.value = true;
			})
		} else {
			$u.msg(graceChecker.error);
		}
	}
</script>

<style lang="scss">
	page,
	.page {
		background-color: #fff;
	}

	.title {
		padding: 50rpx 0 35rpx 0;
	}

	.type_item {
		position: relative;
		width: 318rpx;
		height: 152rpx;
		border-radius: 14rpx;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.pos_image {
			position: absolute;
			bottom: 10rpx;
			right: 10rpx;
			width: 60rpx;
			height: auto;
		}

		&.bg_blue {
			color: #fff;
			background: linear-gradient(136deg, #0034C7 0%, #4072FE 100%);
		}

		&.bg_gray {
			color: #666666;
			background: #CCCCCC;
		}
	}

	.ml20 {
		margin-left: 20rpx;
	}

	.zw_20 {
		width: 100%;
		height: 10rpx;
		background: #F6F6F6;
	}

	.textarea_warp {
		position: relative;
		box-sizing: border-box;
		padding: 25rpx 48rpx;

		.max_len {
			position: absolute;
			bottom: 50rpx;
			right: 80rpx;
		}
	}

	.upload {
		box-sizing: border-box;
		padding: 0rpx 48rpx 10rpx 48rpx;
	}

	.areapd {
		padding: 30rpx;
		min-height: 300rpx;
		box-sizing: border-box;
	}

	.saveBtn {
		margin-top: 75rpx;
	}
</style>